import { useState } from "react";
// import { useNavigate } from "react-router-dom";
import {
  Button,
  Form,
  Input,
  Select,
  Col,
  Row,
  PageHeader,
  Divider,
  DatePicker,
  Checkbox,
  Radio,
} from "antd";
import { useNavigate } from "react-router-dom";
import FormItem from "antd/lib/form/FormItem";
import couponsAdd from "./couponsAdd.scss";
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;

//页头
const routes = [
  {
    path: "index",
    breadcrumbName: "营销管理",
  },
  {
    path: "first",
    breadcrumbName: "优惠券",
  },
  {
    path: "second",
    breadcrumbName: "新建满减优惠券",
  },
];
//Main表单
const plainOptions = ["微信商城", "PC网站", "App"];
const onCheckedChange = (checkedValues) => {
  console.log("checked = ", checkedValues);
};
const onChange = (value, dateString) => {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
};

const onOk = (value) => {
  console.log("onOk: ", value);
};

const handleChange = (value) => {
  console.log(`selected ${value}`);
};

//组件
const CouponsAdd = () => {
  const [radioValue, setRadioValue] = useState("");
  const navigate = useNavigate();
  const onRadioChange = (e) => {
    setRadioValue(e.target.value);
  };
  return (
    <div className="CouponAddBox" style={couponsAdd}>
      <div className="CouponAddHead">
        <PageHeader
          className="site-page-header"
          title="新建满减优惠券"
          breadcrumb={{
            routes,
          }}
        />
        <Divider plain></Divider>
      </div>
      <Form layout="horizontal" size="small">
        <div className="couponsAddMain">
          <h3>基础信息</h3>
          <Row gutter={16}>
            <Col span={12}>
              <FormItem
                label="优惠券名称"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Input placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label="优惠券描述"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Input placeholder="请输入"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <FormItem
                label="发放数量"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Input addonAfter="张" placeholder="请输入" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label="使用渠道"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Checkbox.Group
                  options={plainOptions}
                  defaultValue={["Apple"]}
                  onChange={onCheckedChange}
                />
              </FormItem>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <FormItem
                label="发放数量"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Radio.Group onChange={onRadioChange} value={radioValue}>
                  <Radio value={"AllGoods"}>全部商品</Radio>
                  <Radio value={"PartGoods"}>部分商品</Radio>
                </Radio.Group>
                <Button type="link">选择商品</Button>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label="使用门槛"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Radio.Group onChange={onRadioChange} value={radioValue}>
                  <Radio value={"noneLimit"}>无门槛</Radio>
                  <Radio value={"Limit"}>
                    <Input
                      addonBefore="满"
                      addonAfter="元可用"
                      size="small"
                    ></Input>
                  </Radio>
                </Radio.Group>
              </FormItem>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <FormItem
                label="满减金额"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Input addonAfter="元" placeholder="请输入" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={20} offset={1}>
              <FormItem label="有效期">
                <Radio.Group onChange={onRadioChange} value={radioValue}>
                  <Radio value={"Timelimit"}>
                    <RangePicker
                      showTime={{
                        format: "HH:mm",
                      }}
                      format="YYYY-MM-DD HH:mm"
                      onChange={onChange}
                      onOk={onOk}
                    />
                  </Radio>
                  <Radio value={"timing"}>
                    <Input
                      addonBefore="领取后"
                      addonAfter="日可用"
                      placeholder="请输入"
                      size="small"
                    ></Input>
                  </Radio>
                </Radio.Group>
              </FormItem>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <FormItem
                label="领取人群"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Radio.Group onChange={onRadioChange} value={radioValue}>
                  <Radio value={"AllMember"}>全部会员</Radio>
                  <Radio value={"Level"}>
                    会员等级
                    <Select
                      placeholder="请选择会员等级"
                      style={{
                        width: 120,
                      }}
                      onChange={handleChange}
                    >
                      <Option value="白金会员">白金会员</Option>
                      <Option value="黄金会员">黄金会员</Option>
                      <Option value="铂金会员">铂金会员</Option>
                      <Option value="钛金会员">钛金会员</Option>
                      <Option value="超级会员">超级会员</Option>
                    </Select>
                    及以上可领取
                  </Radio>
                </Radio.Group>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label="每人可领取数量"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Radio.Group onChange={onRadioChange} value={radioValue}>
                  <Radio value={"noneLimit"}>无限制</Radio>
                  <Radio value={"Limit"}>
                    <Input addonBefore="最多可领取" addonAfter="张"></Input>
                  </Radio>
                </Radio.Group>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem
                label="单次可使用数量"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Radio.Group onChange={onRadioChange} value={radioValue}>
                  <Radio value={"noneLimit"}>无限制</Radio>
                  <Radio value={"Limit"}>
                    <Input addonBefore="最多可使用" addonAfter="张"></Input>
                  </Radio>
                </Radio.Group>
              </FormItem>
            </Col>
          </Row>
        </div>
        <div className="Other">
          <h3>其他信息</h3>
          <Row>
            <Col span={12}>
              <FormItem
                label="分享设置"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Checkbox onChange={onCheckedChange}>允许分享给微信好友</Checkbox>
                <TextArea rows={6} placeholder="请输入分享文案" maxLength={8} />
              </FormItem>
              <FormItem
                label="转赠设置"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Checkbox onChange={onCheckedChange}>允许赠送给好友</Checkbox>
              </FormItem>
              <FormItem
                label="公开设置"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Checkbox onChange={onCheckedChange}>允许用户领取</Checkbox>
                <p className="OtherP">开启后允许用户在指定渠道领取使用，若关闭用户将不可自行领取，商家可发放给指定用户。</p>
              </FormItem>                                                                                                                                       
              <FormItem
                label="过期提醒"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Radio.Group onChange={onRadioChange} value={radioValue}>
                    <Radio value={"no"}>不提醒</Radio>
                    <Radio value={"yes"}>到期前
                    <Select
                      placeholder="请选择有效期"
                      style={{
                        width: 120,
                      }}
                      onChange={handleChange}
                    >
                      <Option value="今天">今天</Option>
                      <Option value="一天">一天</Option>
                      <Option value="两天">两天</Option>
                      <Option value="三天">三天</Option>
                      <Option value="五天">五天</Option>
                    </Select>提醒
                    </Radio>
                </Radio.Group>
              </FormItem>
              <FormItem
                label="领取说明"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Checkbox onChange={onCheckedChange}></Checkbox>
                <TextArea rows={6} placeholder="请输入" maxLength={8} />
              </FormItem>
              <FormItem
                label="优惠说明"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Checkbox onChange={onCheckedChange}></Checkbox>
                <TextArea rows={6} placeholder="请输入" maxLength={8} />
              </FormItem>
              <FormItem
                label="使用须知"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
              >
                <Checkbox onChange={onCheckedChange}></Checkbox>
                <TextArea rows={6} placeholder="请输入" maxLength={8} />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col offset={4} span={18}>
                <FormItem
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                >
                    <Button type="primary" style={{marginRight:"8px"}}>提交</Button>
                    <Button onClick={()=>{navigate(-1)}}>返回</Button>
                </FormItem>
            </Col>
          </Row>
        </div>
      </Form>
    </div>
  );
};

export default CouponsAdd;
